<template>
  <div class="person">
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div>{{ nl }}</div>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>


<script lang="ts" setup>
// reactive有个弊端就是，他不能整体修改数据
import { reactive, toRef, toRefs } from 'vue'
const person = reactive({
  name: '小淳',
  age: 18
})

// 通过打印可以发现，我们从一个响应式对象 person 中解构出了 name 和age ，表面上name和age的值都已发生改变，但是我们修改的是name，而 person.name和 person.age 其实没有发生改变，所以页面上的值并没有发生变化。
// let { name, age } = person
// 所以我们要使用响应式 toRefs 来处理数据
// toRefs 接收一个由 reactive 定义的响应式对象，并且将这个响应式对象里面的每一组 key.value 变成一个个新的 ref 响应式对象，解构前后的值都会跟着变化
// toRef 就是只能将其中某一个数据变成响应式的，toRefs 是所有数据都会变成响应式
let { name, age } = toRefs(person)
// 这时打印这两个数据会发现，name 和 age 都变成了 ObjectRefImpl 对象
console.log('toRefs name', name)
console.log('toRefs age', age)

let nl = toRef(person, 'age')
console.log(nl.value, 'toRef年龄')

function changeName() {
  name.value += '~'
  console.log('名字', name, person.name)
}

function changeAge() {
  age.value += 1
  console.log('年龄', age, person.age)
}
</script>

<style scoped>
.person {
  width: 360px;
  height: 100px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
